<template>
  <div>
    <div class="information">
      <div class="font16 fontwBold color333 line22 mb5">
        {{ orderDetail.payName }}
      </div>

      <div class="flex pt20 pb20">
        <div class="mr60" style="max-width: 23%">
          <div class="font14 color999 pb10 line20">订单编号</div>
          <div class="font14 color333 line20">{{ orderDetail.orderNo }}</div>
        </div>
        <div class="mr60" style="max-width: 23%">
          <div class="font14 color999 pb10 line20">支付编号</div>
          <div class="font14 color333 line20">{{ orderDetail.thridPayNo }}</div>
        </div>
        <div class="mr60">
          <div class="font14 color999 pb10 line20">订单金额</div>
          <div class="font14 color333 line20">
            {{ Number(orderDetail.orderAmount) / 100 }}
          </div>
        </div>
        <div style="max-width: 15%">
          <div class="font14 color999 pb10 line20">订单状态</div>
          <!--    订单状态      -->
          <div v-if="orderDetail.orderStatus !== '' || orderDetail.orderStatus !== undefined || orderDetail.orderStatus !== null">
            <div class="font14 color333 line20" v-if="orderDetail.orderStatus == 1">订单创建成功未支付</div>
            <div class="font14 color333 line20" v-if="orderDetail.orderStatus == 2">退款中</div>
            <div class="font14 color333 line20" v-if="orderDetail.orderStatus == 3">退款成功</div>
            <div class="font14 color333 line20" v-if="orderDetail.orderStatus == 4">已缴费</div>
          </div>
          <!--    退款订单状态      -->
          <div v-if="orderDetail.returnOrderStatus !== '' || orderDetail.returnOrderStatus !== undefined || orderDetail.returnOrderStatus !== null">
            <!-- 退款订单状态 0、新建 1、乡级审核通过 2、县级审核通过  3、退款驳回 5.退款成功 returnOrderStatus -->
            <div class="font14 color333 line20" v-if="orderDetail.returnOrderStatus == 0">创建成功，待乡级审核。</div>
            <div class="font14 color333 line20" v-if="orderDetail.returnOrderStatus == 1">乡级审核成功，待县级审核。</div>
            <div class="font14 color333 line20" v-if="orderDetail.returnOrderStatus == 2">审核通过</div>
            <div class="font14 color333 line20" v-if="orderDetail.returnOrderStatus == 3">审核驳回</div>
            <div class="font14 color333 line20" v-if="orderDetail.returnOrderStatus == 5">退款成功</div>
          </div>
        </div>
      </div>
    </div>
    <div class="drawer-tit">参保信息</div>
    <div
      :class="orderDetail.orderStatus == 3 || orderDetail.returnOrderStatus == 5 ? 'mt20 infoDisabled' : 'mt20'"
      style="max-height: 330px; overflow: auto; padding: 2px"
      v-if="Object.keys(residentDetail).length"
    >
      <div class="drawer-content pl16 pr16 positionRel">
        <div class="drawer-tit" style="margin-top: 0">
          {{ residentDetail.name }}
          <labelInfoSmall
            :labelInfo="
              orderDetail.residentTagsList.map((item) => item.tagName)
            "
            class="ml10"
            :disabled="orderDetail.orderStatus == 3 || orderDetail.returnOrderStatus == 5 ? true : false"
            v-if="orderDetail.residentTagsList"
          ></labelInfoSmall>
        </div>
        <Row>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">缴费时间</span>
            <span class="info color333">{{ orderddata.payDate }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">缴费年份</span>
            <span class="info color333">{{ orderddata.orderYear }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">提交人</span>
            <span class="info color333">{{ orderDetail.submitInfo }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">身份证号</span>
            <span class="info color333">{{ residentDetail.idCard }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">联系电话</span>
            <span class="info color333">{{ residentDetail.phone }}</span>
          </Col>
        </Row>
        <img
          src="@/assets/img/yituikuan.png"
          alt=""
          v-if="orderDetail.orderStatus == 3 || orderDetail.returnOrderStatus == 5"
          class="positionAbsolute"
          style="right: 20px; top: 0; bottom: 0; margin: auto"
        />
      </div>
    </div>
    <empty-data v-else></empty-data>
    <div class="drawer-tit" v-if="showLog">操作日志</div>
    <div class="drawer-content" v-if="showLog">
      <BaseTable :columns="columnsLog" :data="operateLogData" :isPage="false">
      </BaseTable>
    </div>
  </div>
</template>

<script>
import EmptyData from "_c/empty-data/empty-data";
import labelInfoSmall from "_c/labelInfo/labelInfoSmall";

export default {
  components: {
    EmptyData,
    labelInfoSmall,
  },
  props: {
    showLog: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      orderddata: "",
      orderDetail: {},
      residentDetail: {},
      operateLogData: [],
      columnsLog: [
        {
          title: "操作人",
          key: "auditUserName",
          align: "left",
          width: 140,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "内容",
          key: "auditContent",
          align: "left",
          minWidth: 200,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "操作时间",
          key: "updateDate",
          align: "left",
          width: 175,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
      ],
    };
  },
  methods: {
    // 获取详情数据
    orderdetailfun(e) {
      this.APIS.orderdetail({ id: e.orderId || e.id }).then((res) => {
        if (res.code == 20000) {
          this.orderddata = res.data;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 获取操作日志
    order_return(e) {
      if (this.showLog) {
        // 操作日志
        this.operateLogData = [];
        this.APIS.order_return({ id: e.orderId }).then((res) => {
          if (res.code == 20000) {
            this.operateLogData = res.data;
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
    getDetail(params) {
      this.orderDetail = params;
      this.detail = {};
      // 居民详情
      this.APIS.residentDetail({ id: params.payResidentId }).then((res) => {
        if (res.code == 20000) {
          this.residentDetail = res.data;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.information {
  border-bottom: 1px solid #eeeeee;
  margin-left: -20px;
  margin-right: -20px;
  padding: 0 20px;
}

.drawer-tit {
  font-weight: bold;
  color: #333333;
  line-height: 20px;
  margin-top: 20px;
}

.drawer-content {
  margin-top: 20px;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);

  .info {
    font-size: 12px;
    line-height: 17px;
  }

  /deep/ .ivu-card {
    padding: 0;
  }
}

.drawer-content:first-child {
  margin-top: 0;
}

.infoDisabled {
  div,
  span {
    color: #999999;
  }
}
</style>
